<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>登录</title>
		<!-- Bootstrap -->
		<link href="../../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
		<style type="text/css">
			.breadcrumb {
				padding: 0;
				margin: 0;
				display: inline-block;
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<nav class="navbar navbar-default">
			  <div class="container-fluid">
			    <!-- Brand and toggle get grouped for better mobile display -->
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			      </button>
			      <a class="navbar-brand" href="#">书本商城</a>
			    </div>
			
			    <!-- Collect the nav links, forms, and other content for toggling -->
			    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="breadcrumb">
					  <li><a href="#">首页</a></li>
					  <li class="active">购物车</li>
					</ul>
			      <!-- <ul class="nav navbar-nav navbar-right">
			        <li class="dropdown">
			          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">登录的用户名 <span class="caret"></span></a>
			          <ul class="dropdown-menu">
			            <li><a href="#">注销</a></li>
			            <li role="separator" class="divider"></li>
			            <li><a href="#">修改密码</a></li>
			          </ul>
			        </li>
			      </ul> -->
				  <div class="nav navbar-nav navbar-right" style="line-height: 50px;">
				  	<span id="span_account" style="color: red; margin-right: 10px;">登录的用户名</span>
					<div class="btn-group" role="group">
					  <button type="button" class="btn btn-danger">修改密码</button>
					  <button type="button" class="btn btn-danger">注销</button>
					</div>
				  </div>
			    </div><!-- /.navbar-collapse -->
			  </div><!-- /.container-fluid -->
			</nav>
			<div class="panel panel-info">
			  <div class="panel-heading">
				  <form style="display: inline-block;" class="form-inline">
				  	<div class="form-group">
				  	    <input type="text" class="form-control input-sm" id="ipt_name" placeholder="书名">
				  	  </div>
				  	<div class="form-group">
				  	    <input type="text" class="form-control input-sm" id="ipt_low" placeholder="最低价">
				  	  </div>
				  	<div class="form-group">
				  	    <input type="text" class="form-control input-sm" id="ipt_top" placeholder="最高价">
				  	  </div>
				  	<button type="button" class="btn btn-default btn-sm" onclick="search()"><span class="glyphicon glyphicon-search"></span></button>
				  </form>
				  <div class="pull-right">
				  	<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#modal_add">添加</button>
				  	<button type="button" class="btn btn-success btn-sm">批量删除</button>
				  </div>
			  </div>
			  <div class="panel-body">
			    <table class="table table-striped table-bordered table-hover" id="mytable">
			    	<thead>
			    		<tr>
			    			<th>序号</th>
			    			<th>书名</th>
			    			<th>日期</th>
			    			<th>单价</th>
			    			<th>数量</th>
			    			<th>操作</th>
			    		</tr>
			    	</thead>
			    	<tbody>
			    		
			    	</tbody>
			    </table>
			    <nav class="text-center">
					<span>一共3条记录解决居中问题</span>
			      <ul class="pagination">
			        <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
			        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
			        <li ><a href="#">2 </a></li>
			        <li ><a href="#">3 </a></li>
					<li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
			      </ul>
			    </nav>
			  </div>
			  <div class="panel-footer">总价格:<span id="span_result"></span></div>
			</div>
			<div id="modal_add" class="modal fade" tabindex="-1" role="dialog">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			        <h4 class="modal-title">添加</h4>
			      </div>
			      <div class="modal-body">
			        <form id="form">
			        	<div class="form-group">
			        		<input type="text" class="form-control" name="name" placeholder="书本名称" /></br>
			        	</div>
						<div class="form-group">
							<input type="text" class="form-control" name="price" placeholder="单价"/></br>
						</div>
						<div class="form-group">
							<input type="date" class="form-control" name="tdate" placeholder="出版日期" /></br>
			        	</div>
			        </form>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			        <button type="button" class="btn btn-primary">保存</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->
			
		</div>
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="../../js/jquery-3.5.1.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="../../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<script src="index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
